<!--
*@Author: zt
*@Description: 角色编辑
*@Date: 2024-08-16
-->
<template>
  <u-dialog v-bind="$attrs" @submit="submit" @close="dialogClose">
    <u-loading-box :spinning="loading">
      <u-busi-item title="" icon="jbxx">
        <u-form :elements="elements" :model="form" ref="formRef" />
      </u-busi-item>
    </u-loading-box>
  </u-dialog>
</template>
<script lang="ts" setup>
import { isSel } from '@/common/model/base.js';
import {
  ref,
  defineProps,
  reactive,
  watch,
  useAttrs,
  computed,
  nextTick,
} from 'vue';
import { alertC, confirmC, nullC } from '@/util/common';
import { FormItemProps } from 'ant-design-vue';
import { _IExtra } from '@/src/components/common/form/interface';
import { storeToRefs } from 'pinia';
import { useBaseStore } from '@/store';
import * as roleService from '@/service/system/role/index';
import * as enmuService from '@/service/enum/index';

const attrs = useAttrs();
const { ROLE_TYPE, ROLE_ATTRIBUTE_VALUE } = storeToRefs(useBaseStore());

const emit = defineEmits(['success']);
const loading = ref(false);
const formItemProps: FormItemProps & _IExtra = {
  labelWidth: '120px',
  colon: false,
};
let form = reactive<any>({
  isuse: '1',
  issystem: '0',
  rolestype: '',
  attributeValue: '',
  rolecode: '',
  rolename: '',
  remark: '',
  keyid: '',
});
let elements = reactive([
  {
    element: 'select',
    label: '角色模块类型',
    col: { span: 24 },
    key: 'rolestype',
    formItemProps: { ...formItemProps, required: true },
    componentProps: {
      options: computed(() => ROLE_TYPE.value),
      fieldNames: { label: 'name', value: 'id' },
    },
  },
  {
    element: 'select',
    label: '角色类型',
    col: { span: 24 },
    key: 'attributeValue',
    formItemProps: { ...formItemProps, allowClear: true },
    componentProps: {
      options: computed(() => ROLE_ATTRIBUTE_VALUE.value),
      fieldNames: { label: 'name', value: 'id' },
    },
  },
  {
    element: 'input',
    label: '角色代码',
    col: { span: 24 },
    key: 'rolecode',
    formItemProps: { ...formItemProps, required: true },
  },
  {
    element: 'input',
    label: '角色名称',
    col: { span: 24 },
    key: 'rolename',
    formItemProps: { ...formItemProps, required: true },
    componentProps: {
      maxlength: 50,
      showCount: true,
    },
  },
  {
    element: 'textarea',
    label: '备注',
    type: 'textarea',
    col: { span: 24 },
    key: 'remark',
    formItemProps: { ...formItemProps, required: true },
    componentProps: {
      maxlength: 200,
      showCount: true,
    },
  },
  {
    element: 'select',
    label: '是否启用',
    col: { span: 24 },
    key: 'isuse',
    formItemProps: { ...formItemProps, required: true },
    componentProps: {
      options: isSel(),
    },
  },
  {
    element: 'select',
    label: '是否系统级别',
    col: { span: 24 },
    key: 'issystem',
    formItemProps: { ...formItemProps, required: true },
    componentProps: {
      options: isSel(),
      disabled: true,
    },
  },
]);

const formRef = ref();

// 保存提交事件
const submit = () => {
  formRef.value.form.validate().then(vali => {
    if (!vali) {
      alertC('请先将表单必填项填写完毕！', 'warning');
      return;
    }
    const url = form.keyid ? 'update' : 'add';
    loading.value = true;
    roleService[url](form)
      .then(res => {
        loading.value = false;
        if (res.code == 0) {
          alertC(res.msg, 'success');
          emit('success');
          dialogClose();
        } else {
          alertC(res.msg, 'warning');
        }
      })
      .catch(err => {
        loading.value = false;
      });
  });
};

// 修改回显数据
const echoInfo = async () => {
  // await getEnumData();
  await roleService
    .singleQuery(attrs.keyid)
    .then(res => {
      if (res.code == 0) {
        for (let key in res.data) {
          form[key] = res.data[key];
        }
        // form = Object.assign({}, res.data);
        form.rolestype = nullC(form.rolestype) + '';
        form.isuse = nullC(form.isuse) + '';
        form.issystem = nullC(form.issystem) + '';
        form.attributeValue = nullC(form.attributeValue) + '';
      }
    })
    .catch(() => {});
};

// 弹窗关闭
const dialogClose = () => {
  formRef.value.form.resetFields();
};

watch(
  () => attrs.open,
  nval => {
    if (nval == true) {
      if (attrs.keyid != '') {
        form.keyid = attrs.keyid;

        nextTick(() => {
          echoInfo();
        });
      }
    }
  }
);
</script>
<style lang="scss"></style>
